<!DOCTYPE html>
<html>

<head>
    <title>鹏优创JSON格式化工具</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/clipboard.min.js"></script>
    <link rel="stylesheet" href="css/jquery.json-viewer.min.css" />
    <script src="js/jquery.json-viewer.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //欧阳鹏文本编辑器
            $("#get").click(function () {
                if ($(".input-url").val() != "") {
                    $(this).text("获取中").removeClass("btn-success").addClass("btn-light");
                    $.get("getjson.php?url=" + encodeURIComponent($(".input-url").val()), function (data) {
                        $("#get").text("获取").removeClass("btn-light").addClass("btn-success");
                        $("#output").val(JSON.stringify(JSON.parse(data), null, 4));
                        $("#json").jsonViewer(JSON.parse($("#output").val()));
                    });
                } else {
                    alert("请输入URL");
                }
            });
            $("#gsh").click(function () {
                $("#output").val(JSON.stringify(JSON.parse($("#output").val()), null, 4));
                $("#json").jsonViewer(JSON.parse($("#output").val()));
            });
            $("#clean").click(function () {
                $("#output,.input-url").val("");
                $("#json").html("");
            });
        });
    </script>
</head>

<body>
    <div class="container" style="padding-top:20px;padding-bottom:20px;">
        <h4 class="mb-3">鹏优创JSON格式化工具</h4>
        <div class="input-group mb-3">
            <input type="text" class="form-control input-url" placeholder="请输入URL">
            <div class="input-group-append">
                <button class="btn btn-success" type="submit" id="get">获取</button>
            </div>
        </div>

        <div class="form-group mb-3">
            <textarea class="form-control" rows="10" id="output" placeholder="请输入JSON字符串"></textarea>
        </div>
        <div class="row mb-3">
            <div class="col">
                <button class="btn btn-success btn-block" id="gsh">格式化</button>
            </div>
            <div class="col">
                <button class="btn btn-info btn-block copybtn" id="copy" data-clipboard-target="#output">复制</button>
            </div>
            <div class="col">
                <button class="btn btn-danger btn-block" id="clean">清空</button>
            </div>
        </div>
        <pre id="json"></pre>
    </div>
    <!--放文档末</body>前 初始化控件-->
    <script>
        var clipboard = new ClipboardJS('.copybtn');
    </script>
</body>

</html>